<template>

  <div class="flex page page-draw-index border-t-4 border-t-[#F8F8FB]">
    <div class="w-18 bg-white border-r-4 border-r-[#F8F8FB] px-1.5 py-2">
      <!-- <div class="icon-container " :class="[{ active: menuIndex == 0 }]" @click="changeMenuIndex(0)">
        <img src="/icons/draw-icon1.png" alt="图标1" class="icon-image" />
        <p class="icon-text">AI素材</p>
      </div> -->

      <div class="icon-container" :class="[{ active: menuIndex == 1 }]" @click="changeMenuIndex(1)">
        <img src="/icons/draw-icon2.png" alt="图标2" class="icon-image" />
        <p class="icon-text">文生图</p>
      </div>

      <div class="icon-container" :class="[{ active: menuIndex == 2 }]" @click="changeMenuIndex(2)">
        <img src="/icons/draw-icon3.png" alt="图标3" class="icon-image" />
        <p class="icon-text">图生图</p>
      </div>

    </div>
    <div class="w-91 px-4 py-3 pb-10  bg-white border-r-4 border-r-[#F8F8FB]">
      <div class="hd flex items-center  text-5 font-bold">
        <span v-if="menuIndex == 0">AI素材</span>
        <span v-if="menuIndex == 1">文生图</span>
      
      </div>
      <div class="inputcon">
        <div class="input-hd">
          <div class="intro text-3 mb-3">
            *文本描述
          </div>
          <textarea type="text" v-model="prompt" class="textarea text-3">
          </textarea>
        </div>
        <div class="input-bd border-box pt-3 text-3 flex justify-between">
          <div class="left flex items-center cursor-pointer ">

            <!-- <img src="/icons/draw-icon5.png" alt="图标1" class="mr-1 w-3 h-3" /> -->
            <span class="text-gray-400" @click="showEnhancePrompt">文本增强</span>
            <!-- <span class="ml-1">请输入多个关键词，用逗号隔开</span> -->
          </div>
          <div class="right text-gray-400">
            {{ prompt.length }}/1000
          </div>
        </div>
        <div class="enhanceprompt" v-if="enhancePromptVisible">
          <div class="close absolute right-4 top-3 text-xl cursor-pointer z-50" @click="closeEnhance">
            <el-icon color="#1D255A">

              <ElIconClose></ElIconClose>
            </el-icon>
          </div>
          <div class="enhanceprompt-hd">
            文本增强
          </div>
          <div class="enhanceprompt-bd" v-html="enhancePrompt">

          </div>
          <div class="btns flex justify-end m-t-5">
            <div class="btn btn1" @click="showEnhancePrompt">换一个</div>
            <div class="btn btn2" @click="comfirmEnhancePrompt">确认</div>
          </div>

        </div>
      </div>

      <div class="group">
        <div class="group-hd">
          风格
        </div>
        <div class="group-bd styles">
          <div class="group-item stylepic" :class="[{ active: activeWorkflow.workflowId == ls.workflowId }]"
            v-for="(ls, index) in currentStyles" :key="index" @click="changeWorkflowId(ls.workflowId)">

            <!-- <img :src="ls.icon" alt="风格图标" class="w-full h-full" /> -->
            <div class="image1" :style="{
              width: '90px',
              height: '90px',
              backgroundImage: `url(${ls.icon})`,
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'center center',
              backgroundSize: 'contain'
            }">
            </div>
            <div
              class="style-name text-4 h-8 flex justify-center items-center absolute left-0 bottom-0  w-full text-white">
              {{ ls.name }}</div>
          </div>

        </div>
        <!-- <div class="group-bd option">
          <div class="label">背景移除</div>
        </div> -->
      </div>

      <div class="group">
        <div class="group-hd">
          张数
        </div>
        <div class="group-bd gennum">
          <div class="group-item numitem" :class="[{ active: gennum == 1 }]" @click="changeGennum(1)">1</div>
          <div class="group-item numitem" :class="[{ active: gennum == 2 }]" @click="changeGennum(2)">2</div>
          <div class="group-item numitem" :class="[{ active: gennum == 3 }]" @click="changeGennum(3)">3</div>
          <div class="group-item numitem" :class="[{ active: gennum == 4 }]" @click="changeGennum(4)">4</div>

        </div>
      </div>


      <div class="button">
        <div class="btn-submit" @click="doDrawImage" :class="[{ disable: loading }]">
          <div class="sumbit-hd text-4">立即生成</div>
          <div class="sumbit-hd text-3 font-light">({{ cost }}积分)</div>
        </div>
      </div>
    </div>


    <div class="min-w-210 bg-white pic-container relative block">
      <div class="canvascon flex" v-if="false">
        <div class="canvascon-left bg-gray-300">
          <canvas ref="canvas" width="300" height="300" @mousedown="startDrawing" @mouseup="stopDrawing"
            @mousemove="draw"></canvas>

        </div>
        <div class="canvascon-right">
          <div>
            <el-button class="m-2">
              <label for="color">画笔颜色:</label>
              <input type="color" id="color" v-model="color" />

            </el-button>
            <el-button class="m-2">
              <label for="size">画笔粗细:</label>
              <input type="range" id="size" v-model="size" min="1" max="10" />
            </el-button>

            <el-button @click="clearCanvas" class="m-2">清除</el-button>
            <el-button @click="undo" class="m-2">撤销</el-button>

            <el-switch v-model="autoFetch" inline-prompt active-text="自动出图" inactive-text="手动出图" />
          </div>
        </div>

      </div>
      <div class="emptycon flex-grow flex items-center justify-center w-full h-full" v-if="!comfyTasks.length">

        <div class="empty flex">
          <div class="left">
            <img src="/icons/draw-icon6.png" alt="图标1" class="w-65 h-45" />

          </div>
          <div class="right">
            <div class="intro-hd">生成的图片将会显示在这里</div>
            <div class="intro-bd">左侧输入描述，创建你的作品吧</div>
          </div>
        </div>
      </div>
      <div class="genpics flex flex-wrap ">
        <div class=" " v-for="(task, index) in comfyTasks" :key="task.prompt_id">

          <ComfyCptTaskItem :taskItem="task" :width="150" :height="150" @clickPubWorkinfo="clickPubWorkinfo"
            @downloadImage="downloadTaskImage(task)" />

        </div>
      </div>


    </div>
  </div>

  <ClientOnly>
    <PublicCptPubWorkInfoModal v-model:visible="pubmodalVisible" :currentTaskInfo="currentTaskInfo"
      @pubworkSuccess="pubworkSuccess" />
  </ClientOnly>
</template>
<script setup>
import PublicCptPubWorkInfoModal from '~/components/public/CptPubWorkInfoModal.vue';
import ComfyCptTaskItem from '~/components/comfy/CptTaskItem.vue';

import { ref } from 'vue'
import { postAiDrawDS, postAIFastGptApps, postAIFetchDifyApps, postAIWorkflowLogs, postSendDrawTask } from '../../service/yapi';
const { signIn, token, data: userInfo, status, lastRefreshedAt, signOut, getSession, } = useAuth();
import { useAppStore } from "~/stores/app";
let app = useAppStore();
let { refreshBalance, downloadByUrl, toggleLoginModal } = app;
let downloadTaskImage = (task) => {
  downloadByUrl({ url: task.outputPics.split(',')[0], name: '图片' });

}
let prompt = ref('一个站立的古代诗人,远眺远方的高山 远景，杰作，水墨风格')
let gennum = ref(1)
let menuIndex = ref(1)
let cost = computed(() => {
  return gennum.value * 1
})
let genPics = ref([])
let comfyTasks = ref([])
const isDrawing = ref(false);
const autoFetch = ref(true);
const context = ref(null);
const color = ref('#000000');
const size = ref(5);
const drawHistory = ref([]);

const canvas = ref(null);

let AImaterialApps = ref([
  {
    workflowId: 1, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/workflows/api-1.png",
    defaultPrompt: "2D茶杯", name: "2D手绘"
  },
  {
    workflowId: 6, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/workflows/api-6.png",
    defaultPrompt: "企鹅", name: "3D"
  },
  {
    workflowId: 4, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/workflows/api-4.png",
    defaultPrompt: "1个男孩,黑色头发", name: "Q版国风"
  },
  {
    workflowId: 10, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/workflows/api-10.png",
    defaultPrompt: "黄色小屋", name: "Q版建筑"
  },
  {
    workflowId: 3, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/workflows/api-3.png",
    defaultPrompt: "1个男孩,黑色皮夹克", name: "Q版人物"
  },
  {
    workflowId: 7, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/workflows/api-7.png",
    defaultPrompt: "摩托车", name: "机甲"
  },
  {
    workflowId: 5, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/workflows/api-5.png",
    defaultPrompt: "小狗", name: "卡通图标"
  },
  {
    workflowId: 8, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/workflows/api-8.png",
    defaultPrompt: "一只小河马", name: "可爱动物"
  },
  {
    workflowId: 2, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/workflows/api-2.png",
    defaultPrompt: "玉兔", name: "写实国风"
  },

])
let baseApps = ref([
{
    workflowId: 30, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/30/1b52ea06-4907-4f3b-aeef-70c315603fbc.png",
    defaultPrompt: "一个站立的古代诗人,远眺远方的高山 远景，杰作，水墨风格", name: "通用"
  },
  {
    workflowId: 24, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/24/df58ac90-6a12-4971-9475-9065d3b24d68.png",
    defaultPrompt: "一个戴着棒棒糖头饰的小女孩，拿着冰淇淋，站在糖果屋前面", name: "糖果"
  },
  {
    workflowId: 25, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/25/d9218d0a-362b-4530-916e-fc29ab9c8633.png",
    defaultPrompt: "一个抱着画册的可爱男孩，穿着中国风的衣服，坐在透明盒子里", name: "玩偶"
  },
  {
    workflowId: 26, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/26/9513bc8f-2757-4d68-960f-a4f2c0f7b139.png",
    defaultPrompt: "一只粉色火烈鸟单脚站在浅粉色水洼中，用于做极简 logo", name: "LOGO"
  },
  {
    workflowId: 27, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/27/9be1a88f-3153-4a5e-904e-8bd5a47fdf60.png",
    defaultPrompt: "一只变成饭团的小狐狸，盘子上有点缀的海苔", name: "饭团动物"
  },
  {
    workflowId: 28, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/28/f0d1b6ef-5942-4a3c-a797-bf43d20cf9cc.png",
    defaultPrompt: "小朋友们坐在森林里的原木上听老猫讲故事，背景是童话风的夜晚星空", name: "绘本"
  },
  {
    workflowId: 29, icon: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/29/e594b5f9-6cca-4fa5-9a9c-0b3aef126e23.png",
    defaultPrompt: "一只小狗躺在地板上，眼睛睁得大大的，好奇地看着窗外", name: "简笔画"
  }

])

let currentStyles = computed(() => {
  if (menuIndex.value == 0) {
    return AImaterialApps.value
  }
  if (menuIndex.value == 1) {
    return baseApps.value
  }
})
let activeWorkflowId = ref(30)
let activeWorkflow = computed(() => {
  return currentStyles.value.find(ls => ls.workflowId == activeWorkflowId.value)
})
let changeWorkflowId = async (id) => {
  if (id == activeWorkflowId.value) {
  } else {
    activeWorkflowId.value = id
    comfyTasks.value = []
    getWorkflowLogs()
  }
}
let getWorkflowLogs = async () => {
  if (loading.value) {
    return
  }
  loading.value = true
  let res = await postAIWorkflowLogs({
    id: activeWorkflowId.value
  })
  if (res.code == 1000) {
    comfyTasks.value = [
      ...comfyTasks.value,
      ...res.data.map(item => {
        return {
          id: item.id,
          prompt_id: item.prompt_id,
          outputPics: item.outputPics,
          workinfos: item.workinfos,
          status: {
            completed: item.outputPics ? true : false
          }
        }
      })
    ]
  }
  loading.value = false
}
let pubworkSuccess = ({ id }) => {
  pubmodalVisible.value = false
  comfyTasks.value = []

  getWorkflowLogs()

}
watch(() => activeWorkflow.value, (val) => {
  prompt.value = val?.defaultPrompt
})
onMounted(() => {
  console.log("%c Line:296 🍌 onMounted", "color:#4fff4B");
  // context.value = canvas.value.getContext('2d');
  // prompt.value = activeWorkflow.value?.defaultPrompt
  // if (activeWorkflow.value&&comfyTasks.value.length == 0) {
  //   getWorkflowLogs()

  // }
});

const startDrawing = (event) => {
  isDrawing.value = true;
  context.value.beginPath();
  context.value.moveTo(event.offsetX, event.offsetY);
};

const stopDrawing = () => {
  if (isDrawing.value) {
    isDrawing.value = false;
    context.value.closePath();
    drawHistory.value.push(context.value.getImageData(0, 0, canvas.value.width, canvas.value.height));
    throttledReadCanvas();
  }
};

const draw = (event) => {
  if (isDrawing.value) {
    context.value.strokeStyle = color.value;
    context.value.lineWidth = size.value;
    context.value.lineTo(event.offsetX, event.offsetY);
    context.value.stroke();
  }
};

const clearCanvas = () => {
  context.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
  drawHistory.value = [];
};

const undo = () => {
  if (drawHistory.value.length > 0) {
    drawHistory.value.pop();
    const lastImage = drawHistory.value[drawHistory.value.length - 1];
    if (lastImage) {
      context.value.putImageData(lastImage, 0, 0);
    } else {
      context.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
    }
  }
};


// 定义防抖函数
function debounce(func, wait) {
  let timeout;
  return function (...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

let baseParams = {
  negative_prompt: "EasyNegative,bad_pictures,paintings,ng_deepnegative_v1_75t,sketches,nsfw,negative_hand-neg,(worst quality:2),(low quality:2),(normal quality:2),lowres,((monochrome)),((grayscale)),skin spots,acnes,skin blemishes,age spot,glans,extra fingers,fewer fingers,((watermark:2)),(white letters:1),(multi nipples),bad anatomy,bad hands,text,error,missing fingers,missing arms,missing legs,extra digit,fewer digits,cropped,worst quality,jpeg artifacts,signature,watermark,username,bad feet,Multiple people,blurry,poorly drawn hands,poorly drawn face,mutation,deformed,extra limbs,extra arms,extra legs,malformed limbs,fused fingers,too many fingers,long neck,cross-eyed,mutated hands,polar lowres,bad body,bad proportions,gross proportions,wrong feet bottom render,abdominal stretch,briefs,knickers,kecks,thong,fused fingers,bad body,bad-picture-chill-75v,bad proportion body to legs,wrong toes,extra toes,missing toes,weird toes,2 body,2 pussy,2 upper,2 lower,2 head,3 hand,3 feet,extra long leg,super long leg,mirrored image,mirrored noise,(bad_prompt_version2:0.8),aged up,old,short legs,3 leg,teeth,white background,simple background,nsfw,bad-picture-chill-75v,badhandv4,bad anatomy,ugly,mutated hands,blurry,fused fingers,too many fingers,EasyNegative,bad_pictures,paintings,ng_deepnegative_v1_75t,sketches,nsfw,negative_hand-neg,(worst quality:2),(low quality:2),(normal quality:2),lowres,((monochrome)),((grayscale)),skin spots,acnes,skin blemishes,age spot,glans,extra fingers,fewer fingers,((watermark:2)),(white letters:1),(multi nipples),bad anatomy,bad hands,text,error,missing fingers,missing arms,missing legs,extra digit,fewer digits,cropped,worst quality,jpeg artifacts,signature,watermark,username,bad feet,Multiple people,blurry,poorly drawn hands,nsfw,nsfw",
  cfg_scale: 1,
  denoising_strength: 0.8,
  num_inference_steps: 1
}
// 读取 canvas 内容并转换为 Base64
const readCanvas = async () => {
  const dataURL = canvas.value.toDataURL('image/png');
  let res = await postAiDrawDS({
    canvas_img: dataURL,
    num_images: gennum.value,
    positive_prompt: prompt.value,
    ...baseParams


  }).catch(err => {
    console.log("%c Line:220 🥚 err", "color:#42b983", err);

  });
  if (res && res.code == 1000) {
    genPics.value = res.images
  }
  console.log("%c Line:217 🥥 res", "color:#fca650", res);
};
const lastRequestTime = ref(0);

let doDrawImage = () => {
  if (prompt.value.length < 2) {
    return ElMessage.warning('请至少输入2个字的描述')
  }
  for (let i = 0; i < gennum.value; i++) {
    drawImageByPrompt(i);
  }
}
let loading = ref(false)
const drawImageByPrompt = async () => {
  if (!token.value) {
    toggleLoginModal()
    return ElMessage.warning('请先登录')

  }
  if (loading.value) {
    return
  }
  const currentTime = Date.now();
  if (gennum.value == 1 && currentTime - lastRequestTime.value < 10000) {
    ElMessage.warning('时间限制：10秒内只能请求一次');
    return;
  }
  lastRequestTime.value = currentTime;
  loading.value = true

  let res = await postSendDrawTask({
    prompt: prompt.value,
    workflowId: activeWorkflowId.value,

  }).catch(err => {
    console.log("%c Line:220 🥚 err", "color:#42b983", err);

  });
  if (res && res.code == 1000) {
    comfyTasks.value = [

      {
        prompt_id: res.data.prompt_id,
      },
      ...comfyTasks.value,
    ]

    refreshBalance()

  } else {
    ElMessage.warning(res.message)
  }
  loading.value = false
}

// 创建一个截流的 readCanvas 函数
const throttledReadCanvas = debounce(readCanvas, 1000);

const addImageToCanvas = function (index) {


  let base64Data = genPics.value[index]

  const image = new Image();
  image.onload = () => {
    context.value.drawImage(image, 0, 0, canvas.value.width, canvas.value.height);

    drawHistory.value.push({
      type: 'image',
      data: base64Data
    });
  };

  image.src = base64Data;

}

let changeMenuIndex = (index) => {

  if (index == 2) {
    return ElMessage.warning('暂未开放')
  }
  if (menuIndex.value == index) {
    return
  }
  comfyTasks.value = []
  menuIndex.value = index
  if(currentStyles.value.length == 0){
    return
  }
  activeWorkflowId.value = currentStyles.value[0].workflowId
  prompt.value = activeWorkflow.value.defaultPrompt
  nextTick(() => {
    getWorkflowLogs()
  })
}

let changeGennum = (num) => {
  gennum.value = num
}

let pubmodalVisible = ref(false)
let currentTaskInfo = ref({
  id: "",
  prompt_id: ""
})
let clickPubWorkinfo = ({ taskItem }) => {

  currentTaskInfo.value.id = taskItem.id
  currentTaskInfo.value.prompt_id = taskItem.prompt_id
  pubmodalVisible.value = true

}

watch(() => userInfo.value, (val) => {
  if (val && val.id) {
    if (comfyTasks.value.length == 0) {
      getWorkflowLogs()
    }

  }
})

let enhancePromptVisible = ref(false)
let enhancePrompt = ref('')
let enhancePromptLoading = ref(false)
let showEnhancePrompt = async () => {
  if (!token.value) {
    toggleLoginModal()
    return ElMessage.warning('请先登录')
  }
  if (enhancePromptLoading.value) {
    return
  }
  enhancePrompt.value = '正在生成中...'
  enhancePromptVisible.value = true
  console.log('showEnhancePrompt')
  let res = await postAIFetchDifyApps({
    appName: "提示词增强v20241024",
    prompt: prompt.value,
  })
  if (res.code == 1000) {
    try {
      enhancePrompt.value = JSON.parse(res.data).answer

    } catch (error) {
      enhancePrompt.value = res.data

    }
  } else {
    ElMessage.warning(res.message)
  }
  enhancePromptLoading.value = true
  enhancePromptLoading.value = false

}
let comfirmEnhancePrompt = () => {
  prompt.value = enhancePrompt.value
  enhancePromptVisible.value = false
}
let closeEnhance = () => {
  enhancePromptVisible.value = false

}

definePageMeta({ auth: false });
</script>

<style lang="scss">
.page-draw-index {
  .icon-container {
    @apply w-15 h-15 cursor-pointer rounded-md flex flex-col items-center justify-center mb-2.5;
    /* 图标之间的间距 */

    .icon-image {
      @apply w-5 h-5;
    }

    .icon-text {
      @apply text-4 m-t-1;
      /* 图标与文字之间的间距 */
    }

    &.active {
      @apply bg-[var(--bg-base)] font-bold;
    }
  }

  .inputcon {
    @apply w-82 bg-[var(--bg-base)] rounded-md mt-3 box-border px-4 py-3 relative;

    .input-hd {


      .textarea {
        @apply w-full h-25 bg-white box-border p-2 rounded-md border-none resize-none;

        &:focus {
          outline: none;
        }
      }
    }


    .input-bd {
      @apply border-t-1 border-color-[CBCED3] mt-2 flex justify-between;
    }

    .enhanceprompt {




      // box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);

      @apply shadow-2xl z-40 box-border absolute w-90 h-72 left-17 top-45 rounded-[16px] px-4 py-5 bg-white;

      .enhanceprompt-hd {
        font-size: 13px;
        color: #1C2336;
        margin-bottom: 20px;

      }

      .enhanceprompt-bd {

        border: 1px solid #ECEEF5;
        font-size: 13px;
        color: #1C2336;

        @apply bg-[#F8F8FB] box-border rounded-[10px] w-80 h-38 p-2 overflow-scroll;

      }

      .btns {
        .btn {
          width: 86px;
          height: 42px;
          border-radius: 8px;
          line-height: 42px;
          text-align: center;
        }

        .btn1 {
          background: #F2F3F9;
          color: #1C2336;

        }

        .btn2 {
          background: #1D255A;
          color: #fff;

        }
      }
    }
  }

  .group {
    @apply mt-3;

    .group-bd {
      @apply mt-2;
    }

    .styles {
      @apply flex flex-wrap bg-[var(--bg-base)] rounded-md px-2 py-2 box-border;

      .group-item {
        overflow: hidden;
        @apply border-2 border-[var(--bg-base)] w-24 h-24 bg-gray-300 relative rounded-md mx-1 my-2 cursor-pointer;

        &.active {
          @apply border-2 border-[var(--blue-base)];
        }

        &.stylepic {

          .style-name {
            background: rgba(29, 37, 90, 0.46);


          }

        }
      }
    }

    .option {
      @apply flex flex-wrap bg-[var(--bg-base)] rounded-md px-2 py-2 box-border;

    }

    .gennum {
      @apply flex flex-wrap rounded-md px-2 py-2 box-border;

      .numitem {
        @apply bg-[var(--bg-base)] py-2 flex-1 rounded-md text-center m-1 cursor-pointer text-gray-400;

        &.active {
          @apply bg-[var(--blue-base)] text-black;
        }
      }
    }

  }


  .btn-submit {
    @apply w-full h-13 bg-[var(--blue-base)] rounded-md cursor-pointer text-center py-2;
    line-height: 1.2;
    background: linear-gradient(180deg, #19E8E0 -3%, #2974F6 92%, #2974F6 100%), #FFFFFF;

    &.disable {
      background: #ccc;
      cursor: not-allowed;
    }

    .sumbit-hd {
      @apply text-white;
    }
  }

  .genpic {
    &:hover .btn-append {
      display: block;
    }
  }
}
</style>